<template>
  <view v-if="value" class="zb-popup" :class="className" @mousemove.prevent.stop>
    <view class="zb-popup-bg" @click="closeMask"></view>
    <view class="zb-popup-container" :class="[`zb-popup-container__${position}`, `${round ? 'round' : ''}`]">
      <slot />
    </view>
  </view>
</template>

<script>
  export default {
    name:"zb-popup",
    props: {
      value: {
        type: Boolean,
        default: false,
      },
      closeable: {
        type: Boolean,
        default: true,
      },
      position: {
        type: String,
        default: 'center'
      },
      round: {
        type: Boolean,
        default: false,
      }
    },
    data() {
      return {
        className: [],
      };
    },
    provide() {
      return {
        zbPopup: this,
      }
    },
    methods: {
      closeMask() {
        if (this.closeable) {
          this.close();
        }
      },
      close() {
        if (this.className.length > 0) {
          this.className = [];
          setTimeout(() => {
            this.$emit('input', false);
          }, 300);
        }
      }
    },
    watch: {
      value(v) {
        if (v) {
          setTimeout(() => {
            this.className = ['zb-popup-animate'];
          }, 30);
        }
      }
    }
  }
</script>

<style lang="scss">
.zb-popup {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .zb-popup-bg {
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    transition: all 300ms;
  }
  .zb-popup-container {
    position: absolute;
    background-color: #fff;
    min-height: 100rpx;
    min-width: 100rpx;
    transition: all 300ms;
    &.zb-popup-container__center {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    &.zb-popup-container__left {
      left: 0;
      height: 100%;
      top: 0;
      bottom: 0;
      transform: translateX(-100%);
    }
    &.zb-popup-container__right {
      right: 0;
      heigth: 100%;
      top: 0;
      bottom: 0;
      transform: translateX(100%);
    }
    &.zb-popup-container__bottom {
      left: 0;
      right: 0;
      width: 100%;
      bottom: 0;
      transform: translateY(100%);
      &.round {
        border-radius: 32rpx 32rpx 0 0;
      }
    }
    &.zb-popup-container__top {
      left: 0;
      right: 0;
      width: 100%;
      top: 0;
      transform: translateY(-100%);
      &.round {
        border-radius: 0 0 32rpx 32rpx;
      }
    }
  }
  &.zb-popup-animate {
    .zb-popup-bg {
      opacity: .4;
    }
    .zb-popup-container__bottom, .zb-popup-container__top {
      transform: translateY(0);
    }
    .zb-popup-container__left, .zb-popup-container__right {
      transform: translateX(0);
    }
  }
}
</style>